<template>
	<block>
		<view class="greyBox" v-if="!shows.first">
			<view class="topBlock">
				<view class="left" @click="shows.screen = true">
					筛选
					<view class="icon">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_screen_supplier@2x.png"
							size="32"></u-icon>
					</view>
				</view>
				<view class="right" @click="handleSendApplyAdd">
					<view class="icon">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_newly_added_supplier@2x.png"
							size="32"></u-icon>
					</view>
					新增发货申请
				</view>
			</view>
			<view class="carItemList" v-if="tableData.length > 0">
				<view class="item" v-for="(item,index) in tableData" :key="index">
					<view class="contentBox">
						<view class="otherInfo ">
							<view class="dateTime">
								<view class="icon">
									<u-icon name="https://supply.zhongyimotor.com/upload/applet/pic_car_supplier@2x.png"
										size="32"></u-icon>
								</view>
								{{item.productInfo}}
							</view>
							<view class="state u-font-24" style="color: #018B1F;">
								{{ getStatusLabel(deliveryType, item.status) }}
								<!-- <u-icon name="arrow-right" color="#8A8A8A" size="24"></u-icon> -->
							</view>
						</view>
						<view class="orderInfo">
							<view class="info">
								<view class="name">进口商名称</view>
								<view class="rightBlock">{{item.buyerName}}</view>
							</view>
							<view class="info">
								<view class="name">启运港</view>
								<view class="rightBlock sub">{{item.startHarborName}}</view>
							</view>
							<view class="info">
								<view class="name">目的港</view>
								<view class="rightBlock sub">{{item.endHarborName}}</view>
							</view>
							<view class="info">
								<view class="name">发货数量</view>
								<view class="rightBlock sub">x{{item.productAmount}}</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<u-button v-if="item.status === 2" size="mini" shape="circle" :custom-style="buttonStyleMini"
							@click="handleReapply(item)">重新申请</u-button>
						<u-button v-else size="mini" shape="circle" :custom-style="buttonStyleMini"
							@click="handleDetails(item)">查看详情</u-button>
					</view>
				</view>
			</view>
			<u-empty v-else margin-top="-128"
				src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
				text="您目前还没有发货申请～"></u-empty>
				
				<u-popup @close="shows.screen = false" closeable v-model="shows.screen" mode="bottom" border-radius="12">
					<view class="search-title">筛选</view>
					<view class="search-form">
						<u-form :model="querys" label-position="top">
							<u-form-item  label="订单号" :border-bottom="false">
								<u-search v-model="querys.orderId" height="72" :show-action="false"
									placeholder="请输入订单号"></u-search>
							</u-form-item>
							<u-form-item  label="车辆信息" :border-bottom="false">
								<u-search v-model="querys.carInfo" height="72" :show-action="false"
									placeholder="请输入车辆信息"></u-search>
							</u-form-item>
							<u-form-item :border-bottom="false">
								<view class="u-flex">
									<u-button class="u-flex-1 u-margin-right-10" shape="circle"
										@click="handleReset">重置</u-button>
									<u-button type="success" :custom-style="{
									'background':'#0FBDF',
									'color':'#fff'
								}" class="u-flex-1" shape="circle" @click="handleSelect">确定</u-button>
								</view>
							</u-form-item>
						</u-form>
					</view>
				</u-popup>
		</view>
		<view v-else class="send-applu_empty">
			<u-empty src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
				text="您目前还没有发货申请～"></u-empty>
			<view class="send-applu_add">
				<u-button type="success" shape="circle" :custom-style="buttonStyle"
					@click="handleSendApplyAdd">新增发货申请</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</block>


</template>

<script>
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	import {
		getStatusLabel,
		deliveryType
	} from '@/utils/status.js'
	export default {
		data() {
			return {
				deliveryType,
				buttonStyle,
				buttonStyleMediumD: {
					width: "300rpx",
					height: "86rpx",
					fontSize: "34rpx",
				},
				buttonStyleMini: {
					color: "#303030",
					width: "152rpx",
					height: "52rpx",
					fontSize: "26rpx",
					marginLeft: "20rpx"
				},
				buttonStyleMedium: {
					width: "300rpx",
					height: "86rpx",
					color: "#FFF",
					background: "#0FBD7F",
					fontSize: "34rpx",
					boxShadow: "0rpx 4rpx 12rpx 0rpx rgba(1,139,31,0.5)"
				},
				querys: {
					current: 1,
					size: 10
				},
				tableData: [],

				shows: {
					screen: false,
					first: false
				}
			}
		},
		onShow() {
			this.querys.current = 1
			this.getTableList(true)
		},
		onReachBottom() {
			this.querys.current += 1;
			this.getTableList()
		},
		methods: {
			handleReapply(item) {
				uni.navigateTo({
					url: "/pages/sendApply/addApply?id=" + item.id
				})
			},
			handleDetails(item) {
				uni.navigateTo({
					url: "/pages/sendApply/details?id=" + item.id
				})
			},
			handleSendApplyAdd() {
				uni.navigateTo({
					url: "/pages/sendApply/addApply"
				})
			},
			getTableList(isFirst = false) {
				const params = JSON.parse(JSON.stringify(this.querys))
				const that = this
				uni.showLoading({
					title: '加载中...'
				});
				that.$api.getDeliveryList(params).then(res => {
					if (params.current === 1) {
						that.tableData = res.result.records
						if (isFirst && res.result.records.length <= 0) {
							that.shows.first = true
						}
					} else {
						that.tableData = [...that.tableData, ...res.result.records]
					}
					uni.hideLoading();
				})
			},
			handleSelect() {
				this.querys.current = 1
				this.getTableList()
				this.shows.screen = false
			},
			handleReset() {
				this.querys = {
					current: 1,
					size: 10
				}
				this.getTableList()
				this.shows.screen = false
			},
			getStatusLabel
		}
	};
</script>

<style scoped lang="scss">
	.search-title {
		margin-top: 30rpx;
		font-weight: bold;
		color: #202020;
		font-size: 16px;
		text-align: center;
	}
	
	.search-form {
		margin: 20px;
	
		/deep/ .u-icon-wrap {
			display: none !important;
		}
	}

	.topBlock {
		display: flex;
		width: 690rpx;
		height: 68rpx;
		line-height: 68rpx;
		margin: 0 auto;

		.icon {
			margin-top: 5rpx;
		}

		.left {
			display: flex;

			.icon {
				margin-left: 8rpx;

			}
		}

		.right {
			display: flex;
			margin-left: auto;

			.icon {
				margin-right: 8rpx;
			}
		}
	}

	.send-applu_empty {
		margin-top: 40%;

		.send-applu_add {
			margin: 50px 30px 0 30px;
		}
	}

	.screenPopup {
		padding: 40rpx;

		.fieldTitle {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #525252;
			margin: 30rpx 0;
		}

		/deep/.u-field {
			height: 72rpx !important;
			padding-top: 8rpx;
			padding-bottom: 8rpx;
			width: 670rpx !important;
		}

		.actions {
			display: flex;

			.button {
				margin: 80rpx auto;
			}
		}


	}
</style>